/*
* @Author: Administrator
* @Date:   2017-10-25 09:34:52
* @Last Modified by:   Administrator
* @Last Modified time: 2017-11-29 16:56:17
*/
.model{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	background: rgba(0,0,0,0.8);
	.model-area{
		background:url(../../static/image/book.jpg) center center no-repeat #ddd;
		border-left: 2px solid #aaa;
		width: 400px;
		height: 500px;
		color: #555;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		perspective:8000px;
		transform-style:preserve-3d;
		.joke-title{
			width: 100%;
			font-size: 28px;
			color: #333;
			text-align: center;
			padding: 20px 0;
			transition:all 1s;
		}
		.joke-item{
			background:url(../../static/image/book.jpg) center center no-repeat #ddd;
			width: 100%;
			height: 100%;
			position: absolute;
			transition:all 1s;
			transform-origin:0 0 0;
			z-index:0;


		}
		.joke-item.active{
			transform:rotateY(-270deg);
			color: #ccc
		}
		.joke-item.active{

			.joke-content,.joke-title,.controlIcon{
				color: #999;
				opacity: 0.5;
			}
			.joke-img img{
				opacity: 0.2;
			}

		}
	}
	.show{
		z-index: 9999;
	}
	.joke-content{
		width: 100%;
		padding: 10px;
		color:#222;
		font-size: 14px;
		font-weight: 700;
		display: table;
		line-height: 25px;
		vertical-align: middle;
		transition:all 1s;
		p{
			display: table-cell;
		}
	}

}
.controlIcon{
	position: fixed;
	bottom: 20px;
	display: block;
	width: 50px;
	height: 30px;
	color: #555;
	font-size: 14px;
	line-height: 30px;
	z-index: 9999;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	transition:all 5s;
	transition-delay: 10s;
	-webkit-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
	transition:all 1s;
}
.next{
	right: 10px;
}
.prev{
	left: 10px;
}
.page-munber{
	width: 100%;
	height: 30px;
	position: absolute;
	bottom: 18px;
	line-height: 30px;
	font-size: 14px;
	color: #777;
	text-align: center;
	padding-bottom: 10px;
}
.page-end{
	width: 100%;
	height: 350px;
	line-height: 350px;
	text-align: center;
	font-size: 26px;
	color: #444;
}
.close{
	width: 30px;
	height: 20px;
	line-height: 20px;
	color: #c80002;
	position: absolute;
	right: 0px;
	top: 5px;
	z-index: 9999;
	text-decoration: underline;
	cursor:pointer;
}
.joke-img{
	width: 100%;
	text-align: center;

	img{
		margin-top: 50px;
		opacity: 1;
		transition:all 1s;
	}
}